import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-video',
  templateUrl: './video.component.html',
  styleUrls: ['./video.component.scss'],
})
export class VideoComponent implements OnInit {
  @Input() videoInfo: any;
  @Output() closeable = new EventEmitter<any>();

  controlStage: true;
  itemSrc: '';
  showReplay: false;

  constructor() {}

  ngOnInit() {
    this.getVideoSrc(this.videoInfo);
    const videoBox = document.querySelector('#videoBox') as HTMLElement;
    // 视频播放结束 回调
    videoBox.onended = () => {};
  }

  // 放开滚动条
  openScroll() {
    const body = document.querySelector('body');
    body.style.cssText = 'position:static; top: 0px; left: 0px; width: 100%;';
  }

  // 禁止滚动条
  stopScroll() {
    const body = document.querySelector('body');
    body.style.cssText = 'overflow:hidden; width: 100%;';
  }

  // 获取视频播放源
  getVideoSrc(video) {
    this.itemSrc = video;
    const maxHeight = document.documentElement.clientHeight - 130;
    const videoScale = 1280 / 720;
    const top = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    this.stopScroll();
    const videoBox = document.querySelector('#videoBox') as HTMLElement;
    const videoDetail = document.querySelector('.video-detail') as HTMLElement;
    videoBox.style.height = `${maxHeight}px`;
    videoBox.style.width = 'auto';
    videoDetail.style.height = `${maxHeight}px`;
    videoDetail.style.width = `${maxHeight * videoScale}px`;
  }

  // 重播
  replayVideo(event) {
    const video = document.querySelector('#videoBox') as HTMLVideoElement;
    video.play();
    this.showReplay = false;
    this.controlStage = true;
  }

  closeVideo() {
    this.closeable.emit({ show: false });
    this.openScroll();
  }
}
